<template>
  <div class="index-wrap">
           <!-- <mt-swipe :auto="4000">
      <mt-swipe-item  v-for="item in  parent_value"   :key="item.url">
          <img  :src="item.url">
        </mt-swipe-item>
      </mt-swipe> -->
      <qousew></qousew>
      <div class="food-left">
    <swiper :parent_value="arrs"></swiper>
     <boss  :boss_value="muildes"></boss>
     <div class="cells"  v-for="item in rouser">
             <a href="#" class="low-a">
           <img v-lazy="item.img1">
             </a>
             <a href="#" class="wouse-a">
 <img v-lazy="item.img2">
             </a>
             <a href="#" class="wouse-b">
  <img v-lazy="item.img3">
             </a>

     </div>
         <div class="cells-a" v-for="item in rouser">
             <a href="#" class="low-a-b">
  <img v-lazy="item.img4">
             </a>
             <a href="#" class="wouse-a-b">
  <img v-lazy="item.img5">
             </a>
     </div>
        <lowe :pouse_value="douses"></lowe>
     <lowss :lowss_value="losswol"></lowss>
     <lowe :pouse_value="buttouny"></lowe>
     <lowss :lowss_value="jioulou"></lowss>
        <lowe :pouse_value="notebook"></lowe>
         <lowss :lowss_value="notebooks"></lowss>
         <lowe :pouse_value="washing"></lowe>
          <lowss :lowss_value="machine"></lowss>
     <!-- <lowe :pouse_value="buttouny"></lowe> -->
     <!-- <lowe></lowe>
     <lowe></lowe>
     <lowe></lowe>
     <lowe></lowe> -->
     </div>
  </div>
</template>

<script>
 import  iscroll from "../../../src/assets/js/iscroll"
import swiper from "../../components/swiper/swiper"
import qousew from "../../components/qousew/qousew"
import boss from "../../components/Boss/boss"
import  lowe from "../../components/lowe/lowe"
import  lowss from "../../components/lowe/lowss"
import Vue from 'vue';
import axios from 'axios'
import { Swipe, SwipeItem } from 'mint-ui';
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
import App from '@/App'

// dist/error.png
// dist/loading.gif
export default {
  name: 'Index',
   data(){
        return{
                value:[],
                arrs:[],
                muildes:[],
                douses:[],
                buttouny:[],
                jioulou:[],
                losswol:[],
                  notebook:[],
                  notebooks:[],
                  washing:[],
                  machine:[],
                rouser:[
                       {img1:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b230ae9b4bdd0ba08cd93fc1b7173dfa.jpg?thumb=1&w=358&h=508",img2:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa7a2362ba4b28e87c777a43adb96a91.jpg?thumb=1&w=358&h=252",img3:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fdc9054f864d1e0a0d5f3b921a10cbea.jpg?thumb=1&w=358&h=252",img4:"https://i8.mifile.cn/v1/a1/139eeb1a-95ac-d278-4b1e-e2fb05798908.webp",img5:"https://i8.mifile.cn/v1/a1/1074a94c-0594-5ddd-7e53-2667d27e8e36.webp"},
                      // {img2:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa7a2362ba4b28e87c777a43adb96a91.jpg?thumb=1&w=358&h=252"},
                      // {img3:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fdc9054f864d1e0a0d5f3b921a10cbea.jpg?thumb=1&w=358&h=252"},
                      // {img4:"https://i8.mifile.cn/v1/a1/139eeb1a-95ac-d278-4b1e-e2fb05798908.webp"},
                      // {img5:"https://i8.mifile.cn/v1/a1/1074a94c-0594-5ddd-7e53-2667d27e8e36.webp"}
                ]
        }
   },
   
        props: ['parent_value','boss_value','pouse_value','lowss_value'],
          components:{
            qousew,
            swiper,
            boss,
            lowe,
            lowss,
          },
          created(){
     this.getList();
     
  },
  methods:{
       getList(){
            	axios.get("/api/yingshi").then((res)=>{
        this.arrs=res.data.links,
        this.value=res.data.boble
        this.muildes=res.data.muildes[0]
        this.douses=res.data.buttouns
        this.buttouny=res.data.buttouny
        this.jioulou=res.data.jioulou
        this.losswol=res.data.losswol
        this.notebook=res.data.notebook
        this.notebooks=res.data.notebooks
        this.washing=res.data.washing
        this.machine=res.data.machine
        // console.log(res.data)
			}).catch((err)=>console.log(err))
        },
  
        
  },
}

</script>
<style  lang="scss"   scoped>
.mint-swipe {
  height: 200px;

   .mint-swipe-item {
    text-align: center;

   } 
}
.cells{
  width: 100%;
    // height: 233px;
  // background:green;
  position: relative;
    .low-a{
        width:50%;
        // height:325px;
        // display:block;
        // background:pink;
       img{ 
                 width: 50%;
         }

    }
     .wouse-a{
        width:50%;
            // height: 132px;
        // display:block;
        // background:yellow;
        position:absolute;
        right:0px;
        top:0px;
  img{ 
                 width: 100%;
         }
    }
      .wouse-b{
        width:50%;
    // height: 118px;
        // display:block;
        // background:red;
        position:absolute;
        right:0px;
        bottom:0px;
          img{ 
                 width: 100%;
                 height:96%;
         }
    }
}
.cells-a{
    width: 100%;
  height:180px;
  // background:blue;
  position: relative;

     .low-a-b{
      width:50%;
        height:150px;
        // display:block;
        // background:red;
         img{
      width:50%;
          height: 150px;
    }
  }
  .wouse-a-b{
      width:50%;
        height:150px;
        // display:block;
        // background:orange;
         position:absolute;
        right:0px;
        top:0px;
         img{
      width:100%;
      height:100%;
     }
  }
}
 .food-left{
        position:relative;
        // height:10000px;
        overflow:hidden;
    }
</style>
